<template>
	<view class="content bg_com">
		<view class="header col_center">
			<view class="icon">
				<image class="img_val" src="../../../static/zs_sd.png" mode=""></image>
			</view>
		</view>
		<view class="main_box">
			<view class="_item col_conter">
				<view class="sl row_center">
					<image class="icon" src="../../../static/zs.png" mode="scaleToFill"></image>
					{{wallet.diamondNum}}
				</view>
				<view class="msg">
					1钻石=1金币
				</view>
				<view class="btn_warp row_center" @click="open">
					兑换金币
					<i class="iconfont icon-arrow-right"></i>
				</view>
				<image class="img_val" src="../../../static/w_bg2.png" mode=""></image>
			</view>
		</view>
		<view class="instruction" @click="goWebView">
			兑换说明>
		</view>

		<!-- 兑换 -->
		<uni-popup ref="popup" type="bottom">
			<view class="dh_warp">
				<view class="title">
					兑换为金币
				</view>
				<view class="msg">
					当前有 {{wallet.diamondNum}} 钻石可兑换
				</view>
				<view class="desc">
					1钻石=1金币
					<text class="sgin">（100整数倍）</text>
				</view>
				<view class="input_warp">
					<input class="dh_input" v-model="exchangeNum" type="text" placeholder="输入要兑换的金币数量" />
				</view>
				<view class="btn_warp">
					<button class="dh_btn" type="default" @click="send">确认兑换</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['identity', 'wallet']),
		data() {
			return {
				diamondNum: 0,
				exchangeNum: ''
			}
		},
		onLoad() {
			this.updateWallet();
		},
		methods: {
			...mapActions(['updateWallet']),
			close() {
				this.$refs.popup.close()
			},
			/* 兑换说明 */
			goWebView() {
				let url = `${this.$urlConfig.h5_config}wanpi/static/withdraw-and-exchange/`;
			    uni.navigateTo({
			        url: `/pages/activeWebView/activeWebView?vurl=${url}`
			    });
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			goldExchangeFun() {
				this.$api.goldExchange({
					currency: 2,
					num: this.exchangeNum,
					uid: this.identity.uid
				}).then(res => {
					if(res.code == 200) {
						uni.showToast({
							title: '兑换成功'
						});
						this.close();
						this.updateWallet();
					}
				})
			},
			/* 兑换 */
			send() {
				if(!(/^[0-9]+$/.test(this.exchangeNum))) {
					uni.showToast({
						title: '请输入正确的兑换数量',
						icon: 'none'
					})
					return;
				}
				if(!(/([0-9]*00)/.test(this.exchangeNum))) {
					uni.showToast({
						title: '请输入100整数倍兑换',
						icon: 'none'
					})
					return;
				}
				if(parseInt(this.exchangeNum) > parseInt(this.wallet.diamondNum)) {
					uni.showToast({
						title: '钻石数量不足',
						icon: 'none'
					})
					return;
				}
				this.goldExchangeFun();
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont/iconfont.css";

	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.ttf');
	}

	@import './index.scss';
</style>
